
const { ccclass, property } = cc._decorator;

@ccclass
export default class bezierTest extends cc.Component {

    @property(cc.Node)
    ctlPoint: cc.Node[] = []
    @property(cc.Graphics)
    graphicsLine: cc.Graphics=null;
    @property(cc.Boolean)
    isLeft: boolean = true
    @property(cc.Float)
    durTime: number = 1

    addPercent: number = 1;
    targetNum: number = 0;
    linePosGrp: cc.Vec2[] = []                  //最终输出的坐标点
    pointGrp: cc.Vec2[] = []                    //每轮刷新使用的坐标数组
    startIndex: number = 0
    canUpdateLine: boolean = false              //是否虚线滚动

    updateTime: number = 0
    // LIFE-CYCLE CALLBACKS:

    // onLoad () {}

    start() {
        // this.restartDraw()
        this.node.on('restartDraw', this.restartDraw.bind(this))
    }

    update(dt) {
        if (!this.canUpdateLine) return
        this.updateTime += 1
        if (this.updateTime == this.durTime) {
            this.updateTime = 0
            if (this.startIndex > 10) {
                this.startIndex = 0
            } else {
                this.startIndex += 1
            }
            this.restartDraw()
        }
    }
    //重新开始绘制一次贝塞尔曲线
    restartDraw() {
        this.linePosGrp = []
        this.targetNum = 0
        this.drawInit()
        this.updateMiddleNodePos()
        this.getAllPos()
        this.drawAll()
        this.canUpdateLine = true
    }

    updateMiddleNodePos() {
        let pos = this.getMiddlePos(this.ctlPoint[0].position, this.ctlPoint[2].position)
        if (this.isLeft) {
            this.ctlPoint[1].position = cc.v3(pos.x - 100, pos.y + 100, 0)
        } else {
            this.ctlPoint[1].position = cc.v3(pos.x + 100, pos.y + 100, 0)
        }
    }

    getMiddlePos(pos1: cc.Vec3, pos2: cc.Vec3) {
        let k = (pos2.y - pos1.y) / (pos2.x - pos1.x)
        let b = pos2.y - k * pos2.x
        let ranX = (pos1.x + pos2.x) / 2
        let ranY = k * ranX + b
        return cc.v2(ranX, ranY)
    }



    getAllPos() {
        while (this.targetNum < 100) {
            this.pointGrp = []
            this.linePosGrp.push(this.getRoundPointPos(this.targetNum))
            this.targetNum += this.addPercent;
        }
        this.linePosGrp.push(this.ctlPoint[this.ctlPoint.length - 1].getPosition())
    }

    //获取该比例下的弧线坐标
    getRoundPointPos(percentage: number) {
        if (this.pointGrp.length == 0) {
            for (let y = 0; y < this.ctlPoint.length; y++) {
                this.pointGrp.push(cc.v2(this.ctlPoint[y].getPosition()))
            }
        }
        if (this.pointGrp.length == 1) {
            let targetPos = cc.v2(parseFloat(this.pointGrp[0].x.toString()), parseFloat(this.pointGrp[0].y.toString()));
            return targetPos
        } else {
            let nextGrp = []
            for (let i = 0; i < this.pointGrp.length - 1; i++) {
                nextGrp.push(this.getLenPos(this.pointGrp[i], this.pointGrp[i + 1], percentage))
            }
            this.pointGrp = nextGrp
            // console.log(this.pointGrp)
            return this.getRoundPointPos(percentage)
        }
    }

    getLenPos(pos1: cc.Vec2, pos2: cc.Vec2, percentage: number) {
        let k = (pos2.y - pos1.y) / (pos2.x - pos1.x)
        let b = pos2.y - k * pos2.x
        let x = pos1.x + percentage / 100 * (pos2.x - pos1.x)
        let y = k * x + b
        return cc.v2(x, y)
    }

    drawInit() {
        this.graphicsLine.clear();
        this.graphicsLine.lineWidth = 6;
        this.graphicsLine.strokeColor = cc.Color.YELLOW;
        // let startPos = this.ctlPoint[this.startIndex].getPosition()
        // this.graphicsLine.moveTo(startPos.x, startPos.y);
    }

    drawAll() {
        this.graphicsLine.clear()
        let startPos = this.linePosGrp[this.startIndex]
        this.graphicsLine.moveTo(startPos.x, startPos.y);
        let saveNum = 0
        for (let i = this.startIndex; i < this.linePosGrp.length; i++) {
            saveNum += 1
            this.graphicsLine.lineTo(this.linePosGrp[i].x, this.linePosGrp[i].y);
            if (saveNum == 10) {
                this.graphicsLine.stroke();
                i += 5
                if (i < this.linePosGrp.length - 1) {
                    this.graphicsLine.moveTo(this.linePosGrp[i].x, this.linePosGrp[i].y);
                }
                saveNum = 0
            }
        }
        // this.graphicsLine.stroke();
    }



    protected onDestroy(): void {
        this.node.off('restartDraw', this.restartDraw.bind(this))
    }
}
